<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/vote.js"></script>
</head>
<body>
<div id="app">

	<vote>
		<div id="vote" class="wrap">
			<h2 style="display: flex;justify-content: space-between;align-items: center">
				查看投票
				<div style="display: flex;justify-content: space-between;align-items: center">
					<el-button @click="del">删除</el-button>
					<el-button @click="update">修改</el-button>
				</div>
			</h2>
			<ul class="list">
				<li>
					<h4>{{vote.vname}}</h4>
					<p class="info">共有 {{vote.items.length}} 个选项，已有 {{vote.unum}} 个网友参与了投票。</p>
					<ol>

						<li v-for=" i in vote.items ">{{i.iname}}
							<div class="rate">
								<div class="ratebg"><div class="percent" :style="{width:i.rate}"></div></div>
								<p>{{i.unum}}票<span>{{i.rate}}</span></p>
							</div>
						</li>



					</ol>
					<div class="goback"><a href="index.html">返回投票列表</a></div>
				</li>
			</ul>
		</div>

		<el-dialog :title="vote.vname" :visible.sync="dialogFormVisible">
			<el-form>
				<el-form-item  label-width="35px" v-for=" i in vote.items ">
					<el-input v-model="i.iname" autocomplete="off" style="width: 430px;margin-right: 40px"></el-input>
					<row>
						<el-button @click="removeItem(i)">删 除</el-button>
						<el-button @click="updateItem(i)">修 改</el-button>
					</row>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addItem">新 增</el-button>
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="ensure">确 定</el-button>
			</div>
		</el-dialog>



	</vote>

</div>

<script>




	var v = new Vue({
		el: "#app",
		data: {
			vote:{
				usid:"",
				items:[],
			},
			addItems:[],
			isLogin:false,
			dialogFormVisible: false,
		},
		created() {
			axios.get("vote/vote/find" + location.search).then(res =>{
				this.vote = res.data;
				//统计总数
				let sum = this.vote.items.map(item => item.unum)  //对象 转 数字
				                         .reduce((a,b) => a+b );  //求和
				this.vote.items.forEach( item => {
					if (sum > 0){
						//计算百分率
						item.rate = parseInt(item.unum * 100 / sum ) + "%";
					}else{
						item.rate = "0%";
					}
				})


				if(localStorage.getItem("isLogin") != "true"){
					localStorage.setItem("isLogin","false");
				}
			});


		},
		methods: {
			del(){

				if("true" == localStorage.getItem("isLogin")){
					this.isLogin = true;
					// localStorage.setItem("isLogin","false");
				}

				if (!this.isLogin){
					this.$alert("请先登录投票系统！");
					return
				}




				this.$confirm('请确认是否删除该投票, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.get("vote/vote/del" + location.search + "&usid=" + this.vote.usid).then(res =>{
						if (res.data.code == 1 ){
							location.href = "/index.html";
						}else{
							this.$alert(res.data.msg);
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},

			update(){
				if("true" == localStorage.getItem("isLogin")){
					this.isLogin = true;
					// localStorage.setItem("isLogin","false");
				}

				if (!this.isLogin){
					this.$alert("请先登录投票系统！");
					return
				}

				axios.get("vote/user/isOne?usid="+this.vote.usid).then(res =>{
					if (res.data.code == 0){
						this.$alert(res.data.msg);
						return;
					}
					this.dialogFormVisible = true;
				})


			},

			removeItem(i){
				let items = i;
				axios.post("vote/items/rm",items).then(res =>{
					if (res.data.code == 1){
						this.vote.items = this.vote.items.filter( item => {
							return item.id != i.id;   // 添加 return
						});
						this.$message("删除选项成功");
						this.dialogFormVisible = false;
					}else{
						this.$message(res.data.msg);
					}
				});
			},

			updateItem(i){
				let items = i;
				axios.post("vote/items/up",items).then(res =>{
					if (res.data.code == 1){
						this.$message("修改选项成功");
						this.dialogFormVisible = false;
					}else{
						this.$alert(res.data.msg);
					}
				});
			},


			addItem(){
				console.log(1111);
				let items = {iname:"",vid:this.vote.items[0].vid};
				this.vote.items.push(items);
				this.addItems.push(items)
			},


			ensure(){

				if (this.addItems.size != 0){
					axios.post("vote/items/add",this.addItems).then( res => {
						if (res.data.code == 1){
							this.$message(this.data.msg);
						}else{
							this.$alert(this.data.msg);
						}
					})
				}

				this.dialogFormVisible = false;

			}

		}

	})



</script>
</div>
</body>
</html>
